<template>
  <page-header-wrapper>
    <a-card class="invoicing-theme">
      <a-row>
        <a-col :span="7">
          订单编号：
          <a-input v-model="search.code" placeholder="请输入" class="input-width"/>
        </a-col>
        <a-col :span="7">
          销售员：
          <a-select placeholder="请选择" style="width: 70%" v-model="search.salesPerson">
            <a-spin slot="notFoundContent" size="small" />
            <a-select-option v-for="item in search.salesPersonList" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          状态：
          <a-select placeholder="请选择" style="width: 70%" v-model="search.status">
            <a-spin slot="notFoundContent" size="small" />
            <a-select-option value="0">已审核</a-select-option>
            <a-select-option value="1">驳回</a-select-option>
            <a-select-option value="2">待审核</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="2">
          <a-button type="primary" icon="search" @click="handleRefreshAndSearch">
            搜索
          </a-button>
        </a-col>
        <a-col :span="1">
          <a-button type="primary" :disabled="disabled" icon="sync" @click="resetSearch">
            重置
          </a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-row class="table-operations">
        <a-col :span="3">
          <a-button type="primary" icon="reload" @click="handleRefreshAndSearch">
            刷新
          </a-button>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        rowKey="code"
        :data-source="table.dataSource"
        :pagination="table.pagination"
        :loading="table.loading"
        @change="handleTableChange">
        <template slot="order" slot-scope="text">
          <a @click="handleToDetail(text)">{{ text }}</a>
        </template>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { salesPersonList, orderList } from '@/api/sale'
const defaultPagination = {
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  pageSizeOptions: ['10', '15', '20'],
  showTotal: total => `总共 ${total} 条数据`
}
export default {
  name: 'AuditSale',
  created () {
    this.getSalesPersonList()
    this.getOrderList()
  },
  computed: {
    columns () {
      const columns = [
        {
          title: '销售订单',
          dataIndex: 'code',
          align: 'center',
          scopedSlots: { customRender: 'order' }
        },
        {
          title: '客户',
          dataIndex: 'client',
          align: 'center'
        },
        {
          title: '销售员',
          dataIndex: 'salesPerson',
          align: 'center'
        },
        {
          title: '销售时间',
          dataIndex: 'saleTime',
          align: 'center',
          sorter: true
        },
        {
          title: '审核人',
          dataIndex: 'auditor',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          customRender: (text, record, index) => {
            if (text === 0) {
              return <a-badge status="success" text="已审核"/>
            } else if (text === 1) {
              return <a-badge status="error" text="驳回"/>
            } else {
              return <a-badge status="processing" text="待审核"/>
            }
          }
        }
      ]
      return columns
    },
    disabled () {
      return !this.search.code && !this.search.salesPerson && !this.search.status
    }
  },
  data () {
    return {
      search: {
        code: null,
        salesPerson: null,
        status: null,
        salesPersonList: []
      },
      table: {
        pagination: defaultPagination,
        loading: false,
        dataSource: [],
        sorter: null
      }
    }
  },
  methods: {
    getOrderList () {
      const _this = this
      const sorter = this.table.sorter || {}
      this.table.loading = true
      orderList({
        page: _this.table.pagination.current,
        pageSize: _this.table.pagination.pageSize,
        order: sorter.order,
        code: _this.search.code,
        salesPerson: _this.search.salesPerson,
        status: _this.search.status
      })
        .then(function (res) {
          _this.table.dataSource = res.data.list
          _this.table.pagination.total = res.data.total
        }).catch(function (err) {
          _this.$message.error(err.response.data.msg)
        }).finally(function () {
          _this.table.loading = false
        })
    },
    getSalesPersonList () {
      const _this = this
      salesPersonList().then(res => {
        _this.search.salesPersonList = res.data.salesPersonList
      }).catch(err => {
        _this.$message.error(err.response.data.msg)
      })
    },
    resetSearch () {
      this.search.code = null
      this.search.salesPerson = null
      this.search.status = null
    },
    handleRefreshAndSearch () {
      this.table.pagination.current = 1
      this.getOrderList()
    },
    handleTableChange (pagination, filters, sorter) {
      this.table.pagination = pagination
      this.table.sorter = sorter
      this.getOrderList()
    },
    handleToDetail (text) {
      this.$router.push({ path: `/audit/auditSaleOrder/${text}` })
    }
  }
}
</script>

<style lang="less" scoped>
.input-width {
  width: 70%;
}
.table-operations {
  margin-bottom: 10px;
}
.delete {
  margin-right: 10px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 16px 10px;
}
</style>
